<template>
  <div class="map-box">
    <div id="map"></div>
  </div>
</template>
<script setup>
  const generateScript = (callback) => {
    const script = document.createElement('script');
    script.src = 'http://1.95.157.217/wmap/wmap.umd.js';
    script.onload = function () {
      callback();
    };
    document.head.appendChild(script)
  }
  import { onMounted } from 'vue'
  onMounted(() => {
    generateScript(() => {
      const map = new WMap.Map('map', {
        center: new WMap.LngLat(116.479662,39.996956),
        zoom: 15
      })
      map.on('click', e => {
        console.log(e.lngLat)
      })
      
      let info = new WMap.InfoWindow({
        title: '这是标记',
        content: '这是标记详情哦',
        offset: [-100, -130],
        width: 200,
        height: 100
      })
      const point = [116.482301, 39.99639]
      const encPoint = new WMap.GPS().gcj_encrypt(point[0], point[1])
      const decPoint = new WMap.GPS().gcj_decrypt(encPoint.lng, encPoint.lat)
      const marker1 = new WMap.Marker({
        map: map,
        position: new WMap.LngLat(encPoint.lng, encPoint.lat),
        icon: 'https://webapi.amap.com/images/car.png',
        offset: [-26, -13],
        angle: 180,
        extData: {
          name: '大林'
        }
      })
      marker1.on('click', e => {
        info.open(map, e.target)
        info.setContent(e.target.getExtentData().name)
      })

      const point1 = [116.489211, 39.996068]
      const encPoint1 = new WMap.GPS().gcj_encrypt(point1[0], point1[1])
      const marker2 = new WMap.Marker({
        map: map,
        position: new WMap.LngLat(encPoint1.lng, encPoint1.lat),
        icon: 'https://webapi.amap.com/images/car.png',
        offset: [-26, -13],
        angle: 90,
        extData: {
          name: '大鹏'
        }
      })
      
      marker2.on('click', e => {
        info.open(map, e.target)
        info.setContent(e.target.getExtentData().name)
      })
    })
  })
</script>
<style>
.map-box{
  height: calc(100vh - 20px)
}
#map {
  height: 100%;
}
</style>